<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div class="logo">
          <a href="#" title=""></a>
        </div>
        <transition  name="fade">
          <div class="header-title">
            <ul>
              <li v-for="(itme, index) in titleData" :key="index" @mouseover="showProductList(index)" @mouseleave="hideProductList">
                <a :href="`${itme.path}`" >
                  {{ itme.title }}
                </a>
              </li>
            </ul>
          </div>
        </transition>
        <div class="login">
          <a href="#"><el-icon><House /></el-icon></a>
          <a href="/login" class="login-icon"><el-icon><Avatar /></el-icon></a>
          <LoggingStatus
            v-show="loginstatus"
            @login_button="login_button"
            @loginOut_button="loginOut_button"
            class="loginstatus"
          />
        </div>
      </el-header>
    </el-container>
  </div>

  <ProductList
    v-model:visible="isShow"
    @closeTime="closeSetTime"
  />

  <Accessories
    v-model:visible="AccessoriesShow"
    @closeTime="closeSetTime"
  />
</template>


<script>
import axios from 'axios'
import {ref,reactive,toRefs, onMounted} from 'vue'
import ProductList from '../../components/ProductList.vue'
import LoggingStatus from '../../components/LoggingStatus.vue'
import Accessories from "@/components/Accessories.vue";


export default {
  name: "StoreHeader",
  setup(){
    const data = reactive({
      titleData: [],
      isShow: ref(false),
      productTimeout: null,
      // username: ref(null),
      loginstatus: ref(false),
      AccessoriesShow: ref(false)
    })

    const getTitle = async () =>{
      const response = await axios.get(
        '/api/getTitle/',
        {
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            'X-Requested-With': 'XMLHttpRequest',
            'Access-Control-Allow-Origin': '*'
          }
        }
      )
      data.titleData = response.data.title
    }


    const showProductList = (index) => {
      if (index === 0){
        data.isShow = true;
      }
      else if (index === 1){
        data.AccessoriesShow = true
      }
      return null
    }

    const hideProductList = () => {
      data.productTimeout = setTimeout(() => {
        data.isShow = false;
        data.AccessoriesShow = false;
      }, 2000);
    };

    const closeSetTime = () => {
      clearTimeout(data.productTimeout);
    }

    const login_button = () => {
      data.loginstatus = true
    }
    const loginOut_button = () => {
      data.loginstatus = false
    }

    const userinfo =() => {

    }




    onMounted(() => {
      getTitle()
    })

    return{
      ...toRefs(data),
      getTitle,
      showProductList,
      hideProductList,
      closeSetTime,
      LoggingStatus,
      login_button,
      loginOut_button
      
    }
  },
  components:{
    ProductList,
    Accessories
  }
}
  

</script>


<style scoped>

.common-layout {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
    padding: 10px; /* 头部区域的内边距，可以根据需要调整 */
    
    z-index: 1000;
    background: white;
  }

  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    width: 180px;
    height: 50px;
    background-color: green;
    background: url('../../static/img/logo.svg') no-repeat;
    margin-left: 50px;
  }

  .logo a{
    line-height: 50px;
    text-decoration: none;
    align-items: center;
  }

  .header-title {
    width: 800px;
  }
  .header-title ul{
    position: relative;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 700px;
  }

  .header-title li{
    margin: 5px -80px;
    cursor: pointer;
    position: relative;

  }



  .header-title li a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: 1000;
    
  }

  .header-title li a:hover{
    color: rgb(209, 110, 110);
  }


  /* 添加下划线 */
  .header-title li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    border-bottom: 3px solid rgb(179, 102, 102); /* 初始下划线位置，可以根据需要进行调整 */
    width: 0; /* 初始下划线宽度为0，悬停时变化 */
    height: 100%; /* 下划线高度，可以根据需要调整 */
    transition: all 0.2s; /* 添加过渡效果 */
  }

  .header-title li a:hover::before{
    content: '';
    width: 100%; /* 下划线宽度变为100% */
    left: 0;
  }

  .login {
    position: relative;
    width: 140px;
    margin-left: 20px;
  }
  .login a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: 1000;
  }


  .slide-enter-active, .slide-leave-active {
    transition: opacity 1.5s;
  }
  .slide-enter, .slide-leave-to {
    opacity: 1.5s;
    overflow: hidden;
  }

  .example-showcase .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  .el-tooltip__trigger {
    margin-left: 5px;
    font-size: 17px;
    font-weight: 200px;
  }

  .el-dropdown {
    position: absolute;
    right: 10px;
    top: 2px;
  }
  .el-tooltip__trigger span {
    font-size: 17px;
    font-weight: 500px;
  }

  .login-icon {
    margin-right: 60px;
    margin-left: 20px;
  }

  .loginstatus {
    margin-top: 0.00417vw;
    margin-right: 10px;
  }
</style>